<template>
  <div>
    <!-- 页眉 -->
    <van-nav-bar fixed title="标题" left-text="返回" left-arrow @click-left="goback" v-show="flag">
      <van-icon name="search" slot="right" />
    </van-nav-bar>

    <!-- 路由中的内容 -->
    <transition name="fade" class="fade">
      <router-view></router-view>
    </transition>

    <!-- 页脚 -->
    <van-tabbar v-model="active" route>
      <!-- 加上 replace 后跳转的路由就不能后退了-->
      <van-tabbar-item icon="home-o" to="/Home">首页</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/Member">会员</van-tabbar-item>
      <van-tabbar-item icon="cart" :info="$store.getters.getnum" to="/Shopcar" id="badge">购物车</van-tabbar-item>
      <van-tabbar-item icon="search" to="/Search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
 
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      flag: false
    };
  },

  methods: {
    goback() {
      this.$router.go(-1);
    }
  },
  created() {
    this.flag = this.$route.path === "/Home" ? false : true ;
  },
  watch: {
    '$route.path': function(newVal){
        if(newVal === "/home"){
          this.flag = false;
        }else
          this.flag = true;
    }
  }
};
</script>

<style scoped>
.fade-enter {
  opacity: 0;
  transform: translateX(100%);
}

.fade-leave-to {
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}
</style>
